<template>
  <div>
    <el-button type="primary" @click="showAddDialog">添加图书</el-button>
    <el-table :data="books" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="title" label="书名"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="copies" label="数量"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteBook(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加图书" :visible.sync="dialogVisible">
      <el-form :model="newBook" label-width="80px">
        <el-form-item label="书名">
          <el-input v-model="newBook.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newBook.author"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="newBook.copies" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addBook">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { id: 1, title: "Python编程", author: "John Doe", copies: 4 },
        { id: 2, title: "历史的秘密", author: "Jane Smith", copies: 3 },
        { id: 3, title: "宇宙探索", author: "Emily Brown", copies: 2 },
        { id: 4, title: "健康生活", author: "Mike Johnson", copies: 5 },
        { id: 5, title: "数学之美", author: "Sarah Lee", copies: 4 },
        { id: 6, title: "艺术欣赏", author: "David White", copies: 3 },
        { id: 7, title: "编程入门", author: "Alice Green", copies: 2 },
        { id: 8, title: "科幻世界", author: "Frank Black", copies: 5 },
        { id: 9, title: "自然奇观", author: "Grace Blue", copies: 4 },
        { id: 10, title: "音乐之声", author: "Tom Red", copies: 3 }
      ],
      dialogVisible: false,
      newBook: {
        title: '',
        author: '',
        copies: 1
      }
    };
  },
  methods: {
    showAddDialog() {
      this.dialogVisible = true;
      this.newBook = {
        title: '',
        author: '',
        copies: 1
      };
    },
    addBook() {
      const newId = Math.max(...this.books.map(book => book.id)) + 1;
      this.books.push({ ...this.newBook, id: newId });
      this.dialogVisible = false;
    },
    deleteBook(book) {
      const index = this.books.indexOf(book);
      if (index !== -1) {
        this.books.splice(index, 1);
      }
    }
  }
};
</script>
